<template>
	<view class="orderDetailPage">
		<view class="order-goods yt-list" @click="goodsDetail">
			<image class="goods-img" :src="orderData.picUrl"></image>
			<view class="goods-box">
				<text class="title clamp">{{orderData.goodsName}}</text>
				<view class="price-box">
					<view class="goods-price">
						<text>{{orderData.actualPrice}}</text>
						<image class="goods-icon" mode="scaleToFill" src="/static/vMall/integralIcon.png"></image>
					</view>
					<text class="goods-sale">{{orderData.specifications ? orderData.specifications.join(' ') : ''}} x {{orderData.number}}</text>
				</view>
			</view>
		</view>
		<view class="order-detail yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">订单编号</text>
				<text class="cell-tip">{{orderData.orderSn}}</text>
				<text class="cell-icon" @click="copy(orderData.orderSn)">复制</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">下单时间</text>
				<text class="cell-tip">{{orderData.createTime}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">支付方式</text>
				<text class="cell-tip">V积分</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">支付时间</text>
				<text class="cell-tip">{{orderData.createTime}}</text>
			</view>
		</view>
		<view class="order-delivery yt-list">
			<text class="tag">配送信息</text>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">收货方式</text>
				<text class="cell-tip">{{orderData.freightType == 0 ? '快递' : '自提'}}</text>
			</view>
			<view class="yt-list-cell b-b" v-if="orderData.freightType == 0">
				<text class="cell-tit clamp">快递单号</text>
				<text class="cell-tip" v-if="orderData.shipSn">{{orderData.shipSn}}</text>
				<text class="cell-tip" v-else>待发货</text>
				<text class="cell-icon" v-show="orderData.shipSn" @click="copy(orderData.shipSn)">复制</text>
			</view>
			<view class="yt-list-cell b-b" v-else>
				<text class="cell-tit clamp">自提状态</text>
				<text class="cell-tip" v-if="orderData.type == 0">待自提</text>
				<text class="cell-tip" v-else>可自提</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">收货地址</text>
				<view class="cen cell-tip">
					<view class="top">
						<text class="name">{{orderData.consignee}}</text>
						<text class="mobile">{{orderData.mobile}}</text>
					</view>
					<text class="address">{{orderData.address}}</text>
				</view>
			</view>
		</view>
		<view class="order-number yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品总额</text>
				<view class="cell-rg">
					<text class="cell-tip price">{{orderData.actualPrice}}</text>
					<image class="goods-icon" mode="scaleToFill" src="/static/vMall/integralIcon.png"></image>
				</view>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">￥<text class="fare">{{orderData.freightPrice}}</text></text>
			</view>
			<view class="yt-list-cell b-b total">
				<view class="total-box">
					<text class="cell-tit clamp">合计：</text>
					<text class="cell-tip">{{orderData.actualPrice + orderData.freightPrice}}</text>
					<image class="goods-icon" mode="scaleToFill" src="/static/vMall/integralIcon.png"></image>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { getUser } from '@/utils/vmall.js';
	export default {
		data() {
			return {
				addressData: {
					name: '',
					mobile: '',
					addressName: '',
					address: '',
					area: '',
					default: false
				},
				orderId: '',
				orderData: {
					picUrl: '',
					goodsName: '',
					number: ''
				},
				name: '',
				picUrl: '',
				from: '',
				shareMessage: false,
				userInfo: {},
			};
		},
		onLoad(option) {
			//option为object类型，会序列化上个页面传递的参数
			this.orderId = option.id
			this.name = option.name
			this.picUrl = option.picUrl
			this.from = option.from
			this.getOrder()
			getUser().then(info => {
				this.userInfo = info
			})
			// this.getGoodsDetail()
		},
		onUnload: function () {
			if (this.from == 'goods') {
				wx.reLaunch({
					url: '/pages/myExchangeList/myExchangeList'
				})
			}
		},
		onShow() {
			if (this.shareMessage) {
				this.shareMessage = false
				this.$request.get(this.$api.shareOrder, {
					forwarderId: this.userInfo.id,
					orderId: this.orderId
				}).then(res => {
					// 加载状态重置
					uni.hideLoading()
					const { success, result } = res
					if (success) {
						if (result && result.indexOf('失败') != -1) {
							this.$appFunc.msg('此订单已分享过了, 继续分享其他订单吧', 3000)
						} else {
							this.$appFunc.msg('分享成功,积分已添加', 3000)
						}
					}
				})
			}
		},
		onShareAppMessage() {
			console.log('onShareAppMessage')
			this.shareMessage = true
		},
		methods: {
			getOrder() {
				this.$request.get(this.$api.orderDetail, {
					id: this.orderId
				}).then(res => {
					// 加载状态重置
					uni.hideLoading()
					const { success, result } = res
					console.log('获取订单', res)
					if (success) {
						if (result.specifications && typeof result.specifications == 'string')  result.specifications = JSON.parse(result.specifications)
						this.orderData = result
					}  else {
						this.orderData = null
						this.$appFunc.msg('获取订单失败')
					}
				})
				
			},
			copy(str) {
				uni.setClipboardData({
					data: str,
					success: function () {
						console.log('success');
					}
				});
			},
			goodsDetail() {
				let id = this.orderData.goodsId
				uni.navigateTo({
					url: '/pages/goodsDetail/goodsDetail?goodsId='+id
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "@/style/variable.scss";

	page {
		background: $page-color-base;
		padding-top: 16rpx;
	}
	.orderDetailPage {
		margin: 0 30rpx;
		padding-bottom: 60rpx;
	}
	.yt-list{
		background-color: $font-color-white;
		margin-top:16rpx;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		padding: $font-base 34rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 15rpx rgba(219, 219, 219, 0.5);
		border-radius: 20rpx;
	}
	.order-goods {
		display: flex;
		.goods-img{
			flex-shrink: 0;
			display: block;
			width: 142rpx;
			height: 133rpx;
		}
		.goods-box {
			flex: 1;
			padding-left: 12rpx;
			overflow: hidden;
			.goods-box-title {
				width: 133rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.title {
				padding-top: 10rpx;
			}
			.price-box {
				display: flex;
				align-items: center;
				line-height: 30rpx;
				padding: 10rpx 0;
				font-size: 26rpx;
				color: $uni-color-primary;

				.goods-price {
					font-family: PingFangSC-Semibold, PingFang SC;
					color: $base-color;
					text-align: right;
					font-weight: 600;
					display: flex;
					height: 42rpx;
					align-items: center;
					flex-direction: row;
					justify-content: flex-end;
					font-size: 30rpx;
					flex-grow: 0;
				}

				.goods-sale {
					flex-grow: 1;
					text-align: right;
					color: $font-color-grey;
					font-size:$font-sm;
				}
			}
		}
	}
	.goods-icon {
		width: 21rpx;
		height: 21rpx;
		margin-left: 5rpx;
	}
	.clamp{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}
	.title{
		font-size:$font-base;
		color: $font-color-black;
		&.clamp {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			white-space: normal;
		}
	}
	
	.yt-list-cell {
		display: flex;
		align-items: center;
		line-height:50rpx;
		position: relative;
		margin:20rpx 0;
	
		&.cell-hover {
			background: #fafafa;
		}
	
		&.b-b:after {
			left: 30rpx;
		}
	
		.cell-icon {
			font-size:$font-sm;
			color:$font-color-black;
			text-align: center;
			background:$image-bg-color;
			padding:0 12rpx;
			margin-left:12rpx;
	
			&.hb {
				background: #ffaa0e;
			}
	
			&.lpk {
				background: #3ab54a;
			}
	
		}
	
		.cell-more {
			align-self: center;
			font-size: $font-sm;
			color: $font-color-light;
			margin-left: 8rpx;
			margin-right: -10rpx;
		}
	
		.cell-tit {
			font-size: $font-sm;
			color:$font-color-grey;
			margin-right:17rpx;
		}
		.cell-tip {
			font-size:$font-sm;
			color:$font-color-black;
	
			&.disabled {
				color: $font-color-light;
			}
	
			&.active {
				color: $base-color;
			}
			&.red{
				color: $base-color;
			}
		}
	
		&.desc-cell {
			.cell-tit {
				max-width: 90rpx;
			}
		}
	
		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}
	.cen {
		display: flex;
		flex-direction: column;
		flex: 1;
		color: $font-color-dark;
		.name {
			margin-right:22rpx;
		}
		.address {
			margin-right: 20rpx;
		}
	}
	.order-delivery{
		.yt-list-cell{
			align-items: baseline;
		}
		.tag{
			color:$font-color-black;
			font-size:$font-lg;
			font-weigh:600;
		}
	}
	.order-number{
		.cell-tit {
			flex:1;
		}
		.price{
			font-size:30rpx;
			font-weight:600;
		}
		.fare{
			font-size:30rpx;
		}
		.total{
			width:100%;
			.cell-tit{
				flex:none;
			}
			.cell-tip{
				font-weight:600;
				font-size:30rpx;
				color:$base-color;
			}
			.total-box{
				flex:1;
				text-align: right;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
		}
	}
	
	
	
</style>
